<template>
    <div class="">
        <slot name="AAA"></slot>
        <el-button type="primary" @click="handleShow(undefined)">添加</el-button>
    
        <el-table :data="tableData" style="width: 100%">
    
            <el-table-column prop="id" label="编号" width="100" />
    
            <el-table-column prop="type" label="部门" width="100" />
    
            <el-table-column prop="name" label="负责人" width="100" />
    
            <el-table-column prop="num" label="人数" width="180" />
    
            <el-table-column prop="state" label="状态" width="100" />
    
            <el-table-column label="操作">
    
                <template #default="scope">
    
                        <el-button size="small" @click="handleHandoff(scope.row)">{{ scope.row.status==='0'?'禁用':'启用' }}</el-button>
    
                        <el-button size="small" @click="handleShow(scope.row)">Edit</el-button>
    
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">Delete</el-button>
</template>
            </el-table-column>
        </el-table>
    </div>

    <div class="">
        <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
            <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="部门">
                    <el-input v-model="form.type" />
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="人数">
                    <el-input v-model="form.num" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="form.delivery" />
                </el-form-item>
            </el-form>
<template #footer>
    <div class="dialog-footer">
    
        <el-button @click="dialogVisible = false">取消</el-button>
    
        <el-button v-show="show" type="primary" @click="onSubmit">添加</el-button>
    
        <el-button v-show="!show" type="primary" @click="onEdit">确定</el-button>
    
    </div>
</template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, toRaw } from "vue"
import { Switch, get_List, list_Add, list_Del, upload } from "@/api";
import { ElMessage, ElMessageBox } from 'element-plus'

// const obj = {
//     type: '',
//     name: '',
//     num: '',
//     delivery: true,
//     id: 0,
//     state: '启用',
//     status: '0'
// }


let form = ref({
    type: '',
    name: '',
    num: '',
    delivery: true,
    id: 0,
    state: '启用',
    status: '0'
})

let tableData = ref('')
let show = ref(true)

// 显示弹框
const handleShow = (val: any | undefined) => {
    console.log(66366, val);
    dialogVisible.value = true
    if (val === undefined) {
        console.log('添加');
        show.value = true
        form.value = {
            type: '',
            name: '',
            num: '',
            delivery: true,
            id: 0,
            state: '启用',
            status: '0'
        }
        return
    }
    console.log('编辑');
    show.value = false
    form.value= {
            type: val.type,
            name: val.type,
            num: val.num,
            delivery: val.delivery,
            id: val.id,
            state: val.state,
            status: val.status
        }
}

// 切换启用 禁用
const handleHandoff = async (row: any) => {
    console.log(toRaw(row));
    if (row.status === '0') {
        row.status = '1'
        row.state = '禁用'
    } else {
        row.status = '0'
        row.state = '启用'
    }
    await Switch({
        id: row.id,
        state: row.state,
        status: row.status
    })
}

// const handleEdit = async (row: any) => {
//     show.value = false
//     dialogVisible.value = true
//     form.type = row.type
//     form.name = row.name
//     form.num = row.num
//     form.id = row.id
//     if (row.status === '1') {
//         form.delivery = true
//     } else {
//         form.delivery = false
//     }
//     await upload({ ...form })
// }
// 删除
const handleDelete = (row: any) => {
    //     console.log(row.state)
    if (row.status === "0") {
        ElMessage.error('未停用不能删除')
    } else {
        ElMessageBox.confirm(
                "你确定要删除吗", {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async () => {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                await list_Del({ id: row.id })
                getList()
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: 'Delete canceled',
                })
            })
    }
}

// 请求接口数据
const getList = async () => {
    let res = await get_List()
    tableData.value = res.data
}
// 编辑按钮事件
const onEdit = async (id: number) => {
    dialogVisible.value = false

    
    if (form.value.delivery) {
        form.value.state = '禁用'
        form.value.status = '1'
    } else {
        form.value.state = '启用'
        form.value.status = '0'
    }
    await upload({ ...form.value })
    getList()
    ElMessage({
        type:"success",
        message:'编辑成功'
    })
}
// 添加按钮事件
const onSubmit = async () => {
    dialogVisible.value = false
    console.log(form, '55555');

    if (form.value.delivery) {
        form.value.state = '禁用'
        form.value.status = '1'
    }
    await list_Add({ ...form.value })
    getList()
    ElMessage({
        type:'success',
        message:"添加成功"
    })
    // resetForm()
}

// function resetForm() {
//     Object.assign(form, obj)
// }

onMounted(() => {
    getList()
})

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {

        })
}
</script>
<style lang="scss" scoped>

</style>
